<template>
  <div class="app-container">
    <el-card class="box-card">
      <div class="app-container-header">
        <el-form>
          <el-row :gutter="10">
            <el-col :span="4">
              <el-form-item>
                <el-input v-model="query.blurry" placeholder="请输入查询内容" />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item>
                <el-button
                  size="mini"
                  type="success"
                  icon="el-icon-search"
                  @click="toQuery"
                >搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="app-container-button">
        <el-button
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="toAdd"
        >
          新增
        </el-button>
        <el-button
          class="filter-item"
          type="danger"
          icon="el-icon-delete"
          size="mini"
          @click="toDelete"
        >
          删除
        </el-button>
      </div>
      <div class="app-container-table">
        <el-table
          ref="table"
          v-loading="loading"
          :data="dataList"
          highlight-current-row
          style="width: 100%;"
          @selection-change="selectionChangeHandler"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="name"
            label="名称"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="type"
            label="通道类型"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="state"
            label="状态"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.state">启用</span>
              <span v-else>禁用</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="240px"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="toEdit(scope.row)"
              >编辑</el-button>
              <el-button
                type="text"
                icon="el-icon-delete"
                size="mini"
                @click="toDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="query.page"
          :page-size="query.size"
          :total="pagerSize"
          style="margin-top: 8px;"
          layout="total, prev, pager, next, sizes"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </el-card>
    <entity ref="entity" @fetch-data="fetchData" />
  </div>
</template>

<script>
import { deleteObject, queryAllByPager } from '@/api/authsetting/index'
import Entity from './component/entity'
export default {
  name: 'MobileChannel',
  components: { Entity },
  dicts: ['user_status'],
  data() {
    return {
      loading: false,
      query: {
        page: 1,
        size: 10
      },
      dataList: [],
      pagerSize: 0,
      rowId: []
    }
  },
  created() {
    this.initData()
  },
  methods: {
    toQuery() {
      this.query.page = 1
      this.initData()
    },
    toAdd() {
      this.$refs.entity.openEntity()
    },
    toEdit(data) {
      this.$refs.entity.openEntity(data)
    },
    toDelete(data) {
      if (data.id !== null && undefined !== data.id) {
        // 单个删除
        this.rowId = []
        this.rowId.push(data.id)
        this.$confirm('此操作将永久删除' + data.name + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            deleteObject(this.rowId)
              .then(res => {
                this.$message.success('删除成功！')
                this.initData()
                this.rowId = []
              })
              .catch(() => {
                this.$message.error('删除失败！')
              })
          })
          .catch(() => {
            this.$message.success('取消删除成功！')
          })
      } else {
        if (this.rowId === null || this.rowId.length === 0) {
          this.$message.info('请选择删除项！')
        } else {
          this.$confirm('此操作将永久删除选中记录，是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              deleteObject(this.rowId)
                .then(res => {
                  this.$message.success('删除成功！')
                  this.initData()
                  this.rowId = []
                })
                .catch(() => {
                  this.$message.error('删除失败！')
                })
            })
            .catch(() => {
              this.$message.success('取消删除成功！')
            })
        }
      }
    },
    fetchData(data) {
      this.initData()
    },
    selectionChangeHandler(val) {
      if (val === null || val.length === 0) {
        this.rowId = []
      } else {
        this.rowId = val.map(res => {
          return res.id
        })
      }
    },
    handleCurrentChange(val) {
      this.query.page = val
      this.initData()
    },
    handleSizeChange(val) {
      this.query.size = val
      this.initData()
    },
    initData() {
      this.loading = true
      queryAllByPager(this.query)
        .then(res => {
          const { data } = res
          if (
            undefined !== data &&
              undefined !== data.data &&
              data.data !== null
          ) {
            this.dataList = data.data
            this.pagerSize = data.pagerSize
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
      this.loading = false
    },
    doSetting(data) {
      this.$refs.setting.openEntity(data)
    }
  }
}
</script>

  <style scoped></style>
